import React, { Component } from 'react'
// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle'

// import styles bundle
import 'swiper/css/bundle'

export default class MySwiper extends Component {
  static defaultProps = {
    loop: false,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  }

  render() {
    console.log('render')
    return (
      <>
        <div className='swiper'>
          <div className='swiper-wrapper'>
            {/* <div className='swiper-slide'>11</div>
            <div className='swiper-slide'>12</div>
            <div className='swiper-slide'>13</div> */}
            {this.props.children}
          </div>
          {/* 如果需要分页器 */}
          <div className='swiper-pagination'></div>

          {/* 如果需要导航按钮  */}
          <div className='swiper-button-prev'></div>
          <div className='swiper-button-next'></div>

          {/* 如果需要滚动条 */}
          <div className='swiper-scrollbar'></div>
        </div>
      </>
    )
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate', prevProps, prevState)
    // 判断是否需要初始化swiper
    if (prevProps.children !== this.props.children) {
      this.swiperInit()
    }
  }

  swiperInit() {
    this.swiper = new Swiper('.swiper', {
      ...this.props,
    })
  }
}
